<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">
</head>
<style>
    .el-input{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
    height:calc(100val - 200px);
</style>
<body>
<div id="app">
    <el-container >
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">数据中心</el-breadcrumb-item>
                <el-breadcrumb-item>SPU库</el-breadcrumb-item>
                <el-breadcrumb-item>SPU新增</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
        <el-main>
            <el-form ref="SPU" :model="SPU" :rules="rules" label-width="20%">
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item label="SPU编号" prop="spu_code">
                            <el-input v-model="SPU.spu_code" style="width: 50%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item label="SPU名称" prop="spu_name">
                            <el-input v-model="SPU.spu_name" style="width: 50%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <#--<el-row>-->
                    <#--<el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">-->
                        <#--<el-form-item label="SPU单位" prop="spu_unit_id">-->
                            <#--<el-select v-model="SPU.spu_unit_id" filterable placeholder="请选择单位" style="width:50%">-->
                                <#--<el-option v-for="unit in unitList" :key="unit.id" :label="unit.unit_name" :value="unit.id">-->
                                <#--</el-option>-->
                            <#--</el-select>-->
                        <#--</el-form-item>-->
                    <#--</el-col>-->
                <#--</el-row>-->
                <#--<el-row>-->
                    <#--<el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">-->
                        <#--<el-form-item label="SPU品牌" prop="spu_brand_id">-->
                            <#--<el-select v-model="SPU.spu_brand_id" filterable placeholder="请选择品牌" style="width:50%">-->
                                <#--<el-option v-for="brand in brandList" :key="brand.id" :label="brand.brand_name"-->
                                           <#--:value="brand.id">-->
                                <#--</el-option>-->
                            <#--</el-select>-->
                        <#--</el-form-item>-->
                    <#--</el-col>-->
                <#--</el-row>-->
                <#--<el-row>-->
                    <#--<el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">-->
                        <#--<el-form-item label="系列/型号" prop="spu_model">-->
                            <#--<el-input v-model="SPU.spu_model" style="width: 50%"></el-input>-->
                        <#--</el-form-item>-->
                    <#--</el-col>-->
                <#--</el-row>-->
                <#--<el-row>-->
                    <#--<el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">-->
                        <#--<el-form-item label="描述" prop="spu_content">-->
                            <#--<el-input v-model="SPU.spu_content" style="width: 50%"></el-input>-->
                        <#--</el-form-item>-->
                    <#--</el-col>-->
                <#--</el-row>-->
                <#--<el-row>-->
                    <#--<el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">-->
                        <#--<el-form-item label="SPU族URL" prop="spu_family_url">-->
                            <#--<el-input v-model="SPU.spu_family_url" style="width: 50%"></el-input>-->
                        <#--</el-form-item>-->
                    <#--</el-col>-->
                <#--</el-row>-->
                <#--<el-row>-->
                    <#--<el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">-->
                        <#--<el-form-item label="规格">-->
                                <#--<el-button @click="addDomain">新增规格</el-button>-->
                        <#--</el-form-item>-->
                    <#--</el-col>-->
                <#--</el-row>-->
                <#--<el-row>-->
                    <#--<el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">-->
                        <#--<el-form-item v-for="(domain, index) in specSlugSet" :label="'规格' + (index+1)" :prop="'specSlugSet.' + index + '.spec'">-->
                            <#--<el-select v-model="domain.spec" filterable placeholder="请选择规格" style="width: 40%">-->
                                <#--<el-option v-for="spec in specList" :key="spec.id" :label="spec.spec_name"-->
                                           <#--:value="spec.id">-->
                                <#--</el-option>-->
                            <#--</el-select>-->
                            <#--<el-button @click.prevent="removeDomain(domain)">删除</el-button>-->
                        <#--</el-form-item>-->
                    <#--</el-col>-->
                <#--</el-row>-->
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item label="图片" prop="spu_pic_url">
                            <el-upload class="upload-demo" action="${url}/uploadController/upload.json" accept=".jpeg,.png,.gif"
                                       :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess" :on-remove="handleRemove"
                                       :on-exceed="onExceed" multiple :limit="1" list-type="picture-card">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="submit('SPU')">提交</el-button>
                    <a href="/dataCenter/spuIndex.page">
                        <el-button>返回</el-button>
                    </a>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</div>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script >
    new Vue({
        el: '#app',
        data: function () {
            return {
                rules: {
                    spu_code: [{
                        required: true,
                        message: '请输入SPU编号',
                        trigger: 'blur'
                    }],
                    spu_name: [{
                        required: true,
                        message: '请输入SPU名称',
                        trigger: 'blur'
                    }],
                    // spu_brand_id: [{
                    //     required: true,
                    //     message: '请选择品牌',
                    //     trigger: 'change'
                    // }],
                    // spu_unit_id: [{
                    //     required: true,
                    //     message: '请选择单位',
                    //     trigger: 'change'
                    // }]
                },
                SPU: {},
                // brandList: [],
                // unitList: [],
                // specList: [],
                // brand: '',
                // unit: '',
                // specSlugSet: [],
            }
        },
        methods: {
            onExceed(files, fileList) {
                this.$message({
                    type: 'info',
                    message: '最多只能上传一个图片',
                    duration: 6000
                });
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handleAvatarSuccess(data, file) {
                if (data.ret) {
                    this.SPU.spu_pic_url = data.data.data;
                }
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isLt2M) {
                    this.$message.error('图片大小不能超过 2MB!');
                }
                return isLt2M;
            },
            submit: function (formName) {
                var SPU = this.SPU;
                // var specSlugSet = [];
                // this.specSlugSet.forEach(function (ele) {
                //     if (ele.spec.length > 0) {
                //         specSlugSet.push(ele.spec);
                //     }
                // });
                // SPU.spu_spec_set = specSlugSet.toString();
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var boolean = false;
                        var  msg= '';
                        $.ajax({
                            url: "${url}/spu/addSpuData.json",
                            type: "POST",
                            async: false,
                            data: SPU,
                            success: function (result) {
                                boolean = result.ret;
                                if(!boolean){
                                    msg = result.msg;
                                }
                            }
                        });
                        if (boolean) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            setTimeout(function () {
                                window.location.href = "/dataCenter/spuIndex.page";
                            }, 1000);
                        } else {
                            this.$message.error(msg);
                        }
                    } else {
                        this.$message({
                            message: '警告，请填写必填字段',
                            type: 'warning'
                        });
                        return false;
                    }
                });
            },
            // removeDomain(item) {
            //     var index = this.specSlugSet.indexOf(item)
            //     if (index !== -1) {
            //         this.specSlugSet.splice(index, 1)
            //     }
            // },
            // addDomain() {
            //     this.specSlugSet.push({
            //         spec: [],
            //     });
            // },
            //获取品牌列表
            <#--brandAjax: function () {-->
                <#--var boolean = false;-->
                <#--var brandList = [];-->
                <#--$.ajax({-->
                    <#--url: '${url}/dataDicController/BrandList.json',-->
                    <#--data: {-->
                        <#--page: 0,-->
                        <#--param: null,-->
                        <#--limit: 0-->
                    <#--},-->
                    <#--type: 'get',-->
                    <#--async: false,-->
                    <#--dataType: 'json',-->
                    <#--success: function (result) {-->
                        <#--boolean = result.ret;-->
                        <#--if(boolean){-->
                            <#--brandList = result.data;-->
                        <#--}-->

                    <#--}-->
                <#--});-->
                <#--if (boolean) {-->
                    <#--this.brandList = brandList;-->
                <#--}else{-->
                    <#--this.$message.error('品牌列表请求异常');-->
                <#--}-->
            <#--},-->
            <#--//获取单位列表-->
            <#--unitAjax: function () {-->
                <#--var boolean = false;-->
                <#--var unitList = [];-->
                <#--$.ajax({-->
                    <#--url: '${url}/dataDicController/unitList.json',-->
                    <#--data: {-->
                        <#--page: 0,-->
                        <#--param: null,-->
                        <#--limit: 0-->
                    <#--},-->
                    <#--type: 'get',-->
                    <#--async: false,-->
                    <#--dataType: 'json',-->
                    <#--success: function (result) {-->
                        <#--boolean = result.ret;-->
                        <#--if(boolean){-->
                            <#--unitList = result.data;-->
                        <#--}-->
                    <#--}-->
                <#--});-->
                <#--if (boolean) {-->
                    <#--this.unitList = unitList;-->
                <#--}else{-->
                    <#--this.$message.error('单位列表请求异常');-->
                <#--}-->
            <#--},-->
            <#--//获取规格属性列表-->
            <#--specAjax: function () {-->
                <#--var boolean = false;-->
                <#--var specList = [];-->
                <#--$.ajax({-->
                    <#--url: '${url}/dataDicController/specList.json',-->
                    <#--data: {-->
                        <#--page: 1,-->
                        <#--param: null,-->
                        <#--limit: 1000000-->
                    <#--},-->
                    <#--type: 'get',-->
                    <#--async: false,-->
                    <#--dataType: 'json',-->
                    <#--success: function (result) {-->
                        <#--boolean = result.ret;-->
                        <#--if(boolean){-->
                            <#--specList = result.data;-->
                        <#--}-->
                    <#--}-->
                <#--});-->
                <#--if (boolean) {-->
                    <#--this.specList = specList;-->
                <#--}else{-->
                    <#--this.$message.error('规格列表请求异常');-->
                <#--}-->
            <#--},-->
        },
        mounted: function () {
            // this.brandAjax();
            // this.unitAjax();
            // this.specAjax();
        },
    })
</script>

</body>

</html>